<!DOCTYPE html>
<html>
<head>
  <title>Canvas Progress Bar</title>
  <style>
    .wrap {
      width: 185px;
      height: 225px;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #f0ad4e;
    }
    canvas {
      display: block;
      /*background-color: #c6f3d7;*/
    }
  </style>
</head>
<body>
<div class="wrap">
  <canvas id="myCanvas" width="145" height="185"></canvas>
</div>

<script>

  function drawRoundedRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.strokeStyle="#339CFF";
    ctx.lineWidth=4;
    ctx.lineTo(x + width - radius, y);
      ctx.lineTo(x + width- radius, y);
      ctx.stroke();
    ctx.arcTo(x + width, y, x + width, y + radius, radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
    ctx.lineTo(x + radius, y + height);
    ctx.arcTo(x, y + height, x, y + height - radius, radius);
    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);
    ctx.stroke();

  }

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  // ctx.beginPath(); // 开始新的路径
  // ctx.moveTo(50, 50); // 设置起点坐标
  // ctx.lineTo(100, 50); // 设置终点坐标
  // ctx.stroke(); // 绘制线条

  drawRoundedRect(ctx, 0  , 0, 145, 185, 10);

</script>

</body>
</html>
